<script setup lang="ts">
import { onMounted, ref } from "vue";
import { get } from "../../request";
import {useServerStore} from "../../store/server"
const store=useServerStore()
import hdialog from "../r-dialog.vue";
import { ElTable } from "element-plus";
interface User {
  client: string;
  source: string;
  flag: boolean;
  price: number;
  text: string;
}
interface Usertwo {
  data: string;
  ids: string;
  client: boolean;
  price: number;
  flag: string;
}
interface Userthree {
  ids: number;
  client: string;
  data: string;
  price: number;
  flag: boolean;
  status: boolean;
}
const tableDataone: User[] = [];
const tableDatatwo: Usertwo[] = [];
const tableDataform: Usertwo[] = [];
const currentRow = ref();
const singleTableRef = ref<InstanceType<typeof ElTable>>();
const handleCurrentChange = (val: User | undefined) => {
  currentRow.value = val;
};

const functionTable = (data) => {
  data.forEach((item) => {
    item.ids = "HT-00" + item.ids;
    if (item.flag == true) {
      item.flag = "已全部付款";
    } else {
      item.flag = "未付款" + item.price;
    }
    if (item.status) {
      item.status = "已过期";
    } else {
      item.status = "未过期";
    }
  });
  return data;
};
const tableDatathree: Userthree[] = ref([]);
const getTable = async () => {
  let res = await get("/client/getContract");
  const itme = functionTable(res.data);
  tableDatathree.value = itme;
};
onMounted(() => {
  getTable();
});
const xiang=ref(false)
const headlerClick=(row:any)=>{
  store.showloads(row)
  xiang.value=true
}
const href = () => {};
</script>
<template>
  <div>
    <hdialog v-model="xiang" :width="`800px`" class="name">
        <h1 class="h1">客户管理</h1>
        <div class="namsex">
          <div style="display: flex">
            <div style="width: 
            10%">客户名称</div>
            <div style="width: 90%">{{ store.datas.ids }}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">申请人</div>
            <div style="width: 90%">{{ store.datas.client }}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">客户类型</div>
            <div style="width: 90%">{{ store.datas.data }}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">来源</div>
            <div style="width: 90%">{{ store.data.laiyuan }}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">联系电话</div>
            <div style="width: 90%">{{ store.datas.price }}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">所在市</div>
            <div style="width: 90%">{{ store.datas.flag }}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">所在省</div>
            <div style="width: 90%">{{ store.datas.status }}</div>
          </div>
        </div>
        <template #footer>
          <p class="bottom">
            <el-button @click="()=>{
              xiang=false
            }">取消</el-button>
          </p>
        </template>
      </hdialog>
    <div class="w-[1054px] flex justify-evenly flex-wrap min-w-[1380px]">
      <div class="w-49% mb-[20px] mt-[10px] min-w-[500px]">
        <div
          class="w-100% flex h-[30px] justify-between items-center bg-[#d9edf7]"
        >
          <div class="text-xs">需要跟踪的销售的机会</div>
          <div class="text-xs">更多>></div>
        </div>
        <el-table
          ref="singleTableRef"
          empty="没有数据"
          :data="tableDataone"
          style="width: 100%"
          @current-change="handleCurrentChange"
        >
          <el-table-column type="index" width="50" />
          <el-table-column
            property="client"
            class="font-bold"
            label="客户"
            width="120"
            height="50"
          />
          <el-table-column
            property="source"
            class="font-bold"
            label="来源"
            width="120"
          />
          <el-table-column
            property="flag"
            class="font-bold"
            label="状态"
            width="120"
          />
          <el-table-column
            property="price"
            class="font-bold"
            label="金额"
            width="120"
          />
          <el-table-column
            property="text"
            class="font-bold"
            label="说明"
            width="120"
          />
        </el-table>
      </div>
      <div class="w-50% mb-[20px] mt-[10px] min-w-[500px]">
        <div
          class="w-100% flex h-[30px] justify-between items-center bg-[#dff0d8]"
        >
          <div class="text-xs">代收款单</div>
          <div class="text-xs" @click="href">更多>></div>
        </div>
        <el-table
          ref="singleTableRef"
          :data="tableDatatwo"
          :default-sort="{ prop: 'date', order: 'descending' }"
          highlight-current-row
          style="width: 100%"
          @current-change="handleCurrentChange"
        >
          <el-table-column type="index" width="50" />
          <el-table-column property="data" label="所属日期" width="120" />
          <el-table-column property="ids" label="合同编号" width="120" />
          <el-table-column property="client" label="客户" width="120" />
          <el-table-column property="price" label="金额" sortable width="120" />
          <el-table-column property="flag" label="状态" width="120" />
        </el-table>
      </div>
      <div class="w-[650px] mb-[20px] mt-[10px] min-w-[500px]">
        <div
          class="w-100% flex h-[30px] justify-between items-center bg-[#dff0d8]"
        >
          <div class="text-xs">需要跟踪的销售的机会</div>
          <div class="text-xs" @click="href">更多>></div>
        </div>
        <el-table
          ref="singleTableRef"
          :data="tableDatathree"
          highlight-current-row
          @row-dblclick="headlerClick"
          style="width: 100%"
          size="small"
          :default-sort="{ prop: 'date', order: 'descending' }"
          border="true"
          @current-change="handleCurrentChange"
        >
          <el-table-column type="index" width="50" />
          <el-table-column property="ids" label="合同编号" />
          <el-table-column property="client" label="客户" width="120" />
          <el-table-column property="data" sortable label="签约日期" />
          <el-table-column property="price" sortable label="合同金额" />
          <el-table-column property="flag" label="待收付款" />
          <el-table-column property="status" label="状态" />
        </el-table>
      </div>
      <div class="w-50% mb-[20px] mt-[10px] min-w-[500px]">
        <div
          class="w-100% flex h-[30px] justify-between items-center bg-[#f2dede]"
        >
          <div class="text-xs">需要跟踪的销售的机会</div>
          <div class="text-xs">更多>></div>
        </div>
        <el-table
          ref="singleTableRef"
          :data="tableDataform"
          highlight-current-row
          style="width: 100%"
          :default-sort="{ prop: 'date', order: 'descending' }"
         
          @current-change="handleCurrentChange"
        >
          <el-table-column type="index" width="50" />
          <el-table-column property="client" label="客户" width="120" />
          <el-table-column property="source" label="来源" width="120" />
          <el-table-column property="flag" label="状态" width="120" />
          <el-table-column property="price" label="金额" sortable width="120" />
          <el-table-column property="text" label="说明" width="120" />
        </el-table>
      </div>
    </div>
  </div>
</template>
<style scoped>
.el-table__row current-row {
  background-color: #54a12b;
}
.name div {
  border: 1px solid black;
}
.namsex {
  width: 600px;
  margin: 0 auto;
}
.namsex div {
  height: 50px;
  line-height: 50px;
}
.h1 {
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
}
</style>
